<template>
  <router-view v-slot="{ Component, route }">
    <transition name="scale">
      <component :is="Component" :key="route.path" />
    </transition>
  </router-view>
  <!-- <router-view></router-view> -->
</template>

<script>
import { defineComponent } from 'vue'
import '../flexible'
export default defineComponent({
  data() {
    return {
      num: ''
    }
  }
})
</script>

<style lang="scss" scoped>
.scale-enter-active,
.scale-leave-active {
  transition: all 0.3s ease;
}

.scale-enter-from,
.scale-leave-to {
  opacity: 0.5;
}
.scale-enter-to,
.scale-leave-from {
  opacity: 1;
}
</style>
